<template>
  <el-input clearable size="large" v-model="input" @blur="getNotice" @keyup.enter="getNotice"
    style="width: 240px;margin:18px 10px 20px 0 ;" placeholder="搜索公告" />
  <!-- 发布公告 -->
  <el-button size="large" type="primary" @click="form1.dialogFormVisible1 = true">+发表新公告</el-button>

  <br>
  <!-- 下拉框 -->
  <el-select v-if="array.arr.length > 0" :placeholder="deletion" style="width: 240px;margin-bottom: 10px ;" size="large"
    @change="handleSelectChange">
    <el-option label="删除" value="delete">
      <span style="float: left">删除</span>
      <span style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;">
        delete
      </span>
    </el-option>
  </el-select>

  <el-card style="margin-top: 15px;">
    <el-table :data="state.noticedata" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="公告内容">
        <template v-slot="scope">
          <span v-html="scope.row.content"></span>
        </template>
      </el-table-column>
      <el-table-column property="createTime" label="发布时间" />
      <el-table-column property="updateTime" label="更新时间">
        <template v-slot="scope">
          <span v-if="scope.row.updateTime == null">
            暂无更新
          </span>
          <span v-else>
            {{ scope.row.updateTime }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template v-slot="scope">
          <span v-if="scope.row.status == 1" style="color: #67ca4d;">
            当前系统公告
          </span>
          <span v-else style="color: #f8d768;">
            历史公告
          </span>
        </template>
      </el-table-column>
      <el-table-column v-slot="scope" property="operate" label="操作">
        <el-button size="large" type="warning" @click="openUpdateDialog(scope.row)">
          更新公告
        </el-button>
      </el-table-column>


    </el-table>
  </el-card>

  <!-- 发布公告 -->
  <el-dialog v-model="form1.dialogFormVisible1" title="发布公告" width="60%">
    <el-form :model="form1">
      <el-form-item label="公告内容" :label-width="formLabelWidth">
        <el-input v-model="form1.content" :autosize="{ minRows: 5, maxRows: 10 }" type="textarea" placeholder="请输入" />
      </el-form-item>
      <br>
      <el-form-item label="是否是新公告" :label-width="formLabelWidth">
        <el-select v-model="form1.region" placeholder="请选择" size="large" style="width: 240px;">
          <el-option label="是" value="1" />
          <el-option label="否" value="0" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="large" @click="DialogFormVisible1()">取消</el-button>
        <el-button size="large" type="primary" @click="addNotice()">发布</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 更新公告 -->
  <el-dialog v-model="dialogFormVisible" title="公告更新" width="60%">
    <el-form :model="form">
      <el-form-item label="公告内容" :label-width="formLabelWidth">
        <el-input v-model="form.content" :autosize="{ minRows: 5, maxRows: 10 }" type="textarea" placeholder="请输入" />
      </el-form-item>
      <br>
      <el-form-item label="当前最新公告?" :label-width="formLabelWidth">
        <el-select v-model="form.status" size="large" style="width: 240px;">
          <el-option label="是" value="1" />
          <el-option label="否" value="0" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="large" @click="dialogFormVisible = false">取消</el-button>
        <el-button size="large" type="primary" @click="updateNotice(form.nid)">更新</el-button>
      </div>
    </template>
  </el-dialog>
  <div class="demo-pagination-block">
    <div class="demonstration"></div>
    <el-pagination v-model:current-page="state.page.pageNo" v-model:page-size="state.page.pageSize"
      :page-sizes="[5, 10, 15, 20]" :size="size" :disabled="disabled" :background="background"
      layout="total, sizes, prev, pager, next, jumper" :total="state.total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>

<script setup lang="ts">

import { ComponentSize } from 'element-plus'

import { inject, ref, onMounted, reactive, computed } from 'vue'
const input = ref('')
import {
  deleteNotice,
  updateNotices,
  getAllNotice,
  publishNotice,
} from '@/api/system/NoticeManage'
const formLabelWidth = '140px'
const dialogFormVisible = ref(false)


const deletion = ref('')

const array = reactive({ arr: [] })
const handleSelectionChange = (selectedRows: []) => {
  array.arr = selectedRows
  console.log(array.arr);
  deletion.value = `已选择${array.arr.length}项`
}

const handleSelectChange = async (value: string) => {
  if (value == 'delete') {
    const ids = array.arr.map(row => row.nid).join(',')
    await deleteNotice(ids)
    getNotice()
  }
}


// 打开更新公告对话框
function openUpdateDialog(row) {
  form.content = row.content;
  form.status = row.status == 1 ? "是" : '否';
  form.nid = row.nid;
  dialogFormVisible.value = true;
}
// 更新公告

// 1.数据

const form = reactive({
  content: '',
  status: '',
  nid: ''
})
// 发送更新请求
async function updateNotice(nid) {
  await updateNotices({
    content: form.content,
    nid: nid,
    status: form.status
  })
  getNotice(); // 更新数据
  dialogFormVisible.value = false; // 关闭对话框
}


// 公告
const state = reactive({
  noticedata: [],
  page: {
    pageNo: 1,
    pageSize: 10
  },
  total: 0
})

// 获取公告
// 1.生命周期
onMounted(() => {
  getNotice()
})
// 2.发送请求
async function getNotice() {
  const { data } = await getAllNotice(input.value,state.page.pageNo,state.page.pageSize)
  state.noticedata = data.data.notices
  // console.log(state.noticedata);
  // console.log(data.notices[0].content);
  state.total = data.data.total
}
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  state.page.pageSize = val
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  state.page.pageNo = val
}

// 跟新

// 添加公告
// 1数据

const form1 = reactive({
  dialogFormVisible1: false,
  content: '',
  region: ''
})
// 2是否隐藏
function DialogFormVisible1() {
  form1.dialogFormVisible1 = false
  empty()
}
// 3.清空
function empty() {
  form1.content = '',
  form1.region = ''
}
// 3请求
async function addNotice() {
  await publishNotice(
    {
      content: form1.content,
      status: form1.region
    })
  DialogFormVisible1()

  getNotice()
}


// 公告更细

</script>
<style scoped lang="less">
.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>